<template>
  <div>

    <el-card class="" shadow="hover">
      <el-table :data="pagedOrderData" style="width: 100%" :row-class-name="rowClassName">
        <el-table-column prop="id" label="订单ID"></el-table-column>
        <el-table-column prop="userId" label="用户ID"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable :sort-method="sortCreateTime"></el-table-column>
        <el-table-column prop="orderType" label="订单状态" :formatter="formatOrderStatus"
                         :filters="[{ text: '未完成', value: '0' }, { text: '已完成', value: '1' },{ text: '未发货', value: '6' },{ text: '已发货', value: '5' }]"
                         :filter-method="filterTag"
                         filter-placement="bottom-end"></el-table-column>
        <el-table-column prop="payTime" label="支付时间"></el-table-column>
        <el-table-column prop="payType" label="支付类型"
                         :filters="[{ text: '未支付', value: '0' }, { text: '已支付', value: '1' }]"
                         :filter-method="filterPayType"
                         filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.payType === '0'" type="danger">未支付</el-tag>
            <el-tag v-else-if="scope.row.payType === '1'" type="success">已支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="totalPrice" label="总价(时间币)"></el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="viewAddress(scope.row)">地址详情</el-button>
            <el-button type="text" @click="viewOrderDetail(scope.row)">查看订单详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination :total="orders.length" :page-size="pageSize" @current-change="handleCurrentChange"
                       layout=" prev, pager, next, total"/>
      </div>
    </el-card>
    <el-dialog title="物流详情" :visible.sync="dialogFormVisible" width="30%" center>
      <el-form ref="usersForm" :model="currentAddress" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input :value="currentAddress.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input :value="currentAddress.phone" readonly></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="receivingAddress">
          <el-input :value="currentAddress.receivingAddress" readonly></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ToShip()">去发货</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryAllOrder,
  queryAddressById,
  updateOrder
} from '../../../api/index'

export default {
  data() {
    return {
      orders: [
        {
          "addressId": "5663df",
          "createTime": "2024-03-18 21:35:12",
          "docType": "ORDER",
          "id": "42592a",
          "orderNum": "42592a2038c",
          "orderType": "0",
          "payTime": "null",
          "payType": "0",
          "totalPrice": "7",
          "updateTime": "2024-03-18 21:35:12",
          "userId": "e2fb1d"
        }
      ],
      dialogFormVisible: false,
      currentAddress: {},
      currentOrder: {},
      pageSize: 10,
      currentPage: 1,
    };
  },
  mounted() {
    this.getAllOrder()
  },
  computed: {
    // 分页后的用户数据
    pagedOrderData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.orders.slice(startIndex, endIndex);
    }
  },
  methods: {
    sortCreateTime(a, b) {
      return new Date(a.createTime) - new Date(b.createTime);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    filterPayType(value, row){
      console.log(row)
      return row.payType === value;
    },
    filterTag(value, row) {
      return row.orderType === value;
    },
    formatOrderStatus(row, column, cellValue) {
      switch (cellValue) {
        case '0':
          return '未完成';
        case '1':
          return '已完成';
        case '2':
          return '已过期';
        case '3':
          return '商家关闭';
        case '4':
          return '用户取消';
        case '5':
          return '已发货';
        case '6':
          return '未发货';
        default:
          return '';
      }
    },

    viewAddress(row) {
      // 处理查看地址的逻辑
      console.log("查看地址", row);
      this.currentOrder = {...row}
      queryAddressById(row.addressId).then(res => {
        if (res.data) {
          this.currentAddress = res.data[0]
        }
        this.dialogFormVisible = true
      })
    },
    // 发货
    ToShip() {

      const data = {
        id: this.currentOrder.id,
        orderType: '5'
      }
      updateOrder(data).then(res => {
        console.log(res)
        this.dialogFormVisible = false
        this.getAllOrder()
        this.$message.success("发货成功")
      })
    },
    rowClassName({row}) {
      if (row.payType != '0') {
        return ''; // 如果满足条件，则返回空字符串
      }
      return 'danger-row';  // 返回自定义类名
    },
    viewOrderDetail(row) {
      // 处理查看订单详情的逻辑
      console.log("查看订单详情", row);
      // 跳转到OrderDetails这个组件中并传入row.orderNum
      this.$router.push({
        name: 'OrderDetails',
        params: {orderNum: row.orderNum, orderId: row.id, addressId: row.addressId}
      })
    },

    getAllOrder() {
      queryAllOrder().then(res => {
        this.orders = res.data
        console.log(this.orders)
      })
    }
  }
};
</script>
<style>
.el-table .danger-row {
  background-color: rgba(241, 243, 245, 0.53);
}

.pagination {
  text-align: center;
}
</style>